{include file="public/header" /}
<link rel="stylesheet" href="/static/index/css/page/my_order.css">
<body>
<div class="build-navbar" data-title="我的订单"></div>
<div class="main">
    <div class="tab flex justify-between items-center">
        {foreach name="tab" item="vo" key='key'}
        <div data-type="{$key}" class="item {if $type == $key}lay-this{/if}" lay-change="status">{$vo}</div>
        {/foreach}
    </div>
    <div class="tpl_list"></div>

</div>
<script id="template" type="text/html">
    {{# for(var i=0;i < d.data.length ;i++){ }}
    <div class="card order-container p-30">
        <div class="card-title flex items-center justify-between ">
            <div class="sn flex-1 line-1">订单编号：{{d.data[i].sn}}</div>
            <div class="status status-{{d.data[i].status}} ">{{d.data[i].statusText}}</div>
        </div>
        {{# for(var j=0;j < d.data[i].productsField.length;j++){ }}
        <div class="pro-item flex items-start justify-between py-30">
            <img src="{{d.data[i].productsField[j].icon}}" alt="{{d.data[i].productsField[j].title}}" class="icon"/>
            <div class="major flex items-start flex-col flex-1">
                <div class="title line-2">{{d.data[i].productsField[j].title}}</div>
                <div class="spec line-2">{{d.data[i].productsField[j].spec}}</div>
            </div>
            <div class="fund flex items-end flex-col">
                <div class="price front">{{d.data[i].productsField[j].vip_price}}</div>
                <div class="num">x{{d.data[i].productsField[j].num}}</div>
            </div>
        </div>
        {{# } }}
        <div class="real-amount flex items-center justify-end mt-30">
            <div class="text">实付款</div>
            <div class="total front">{{d.data[i].real_amount}}</div>
        </div>
        <div class="btn-container mt-30">
            {{# if(d.data[i].status == 1){ }}
            <button class="small-btn small-border-gray-btn" data-type="clear" lay-click="edit"
                    data-id="{{d.data[i].id}}">取消订单</button>
            <button class="small-btn small-border-btn" lay-event="jump"
                    lay-url="{:url('order/payment')}?id={{d.data[i].id}}">立即支付
            </button>
            {{# }else if(d.data[i].status == 3) { }}
            <button class="small-btn small-border-btn" data-type="receipt" lay-click="edit"
                    data-id="{{d.data[i].id}}">确认收货</button>
            {{# } }}
            <button class="small-btn small-border-bd2-btn"
                    lay-url="{:url('order/my_order_details')}?id={{d.data[i].id}}" lay-event="jump">订单详情
            </button>
        </div>
    </div>
    {{# } }}
</script>
</body>
{include file="public/footer"/}
<script>
    layui.use(['methods'], function () {
        var m = layui.methods, a = layui.jquery, ly = layui.layer,
            fun = {
                getList: function (type) {
                    m.getFlowData('{:url("order/getList")}?type=' + type);
                },
                edit: function (type, msg, id) {
                    ly.confirm('是否' + msg + '？', {title: '请确认'}, function () {
                        return m.fetchPostThrottle('{:url("order/edit")}', {type: type, id: id},function (d){
                            ly.msg(d.msg);
                            fun.getList(a('.lay-this').attr('data-type'));
                        })
                    });
                }
            };
        fun.getList(a('.lay-this').attr('data-type'));
        m.event.click('edit', function (data, that) {
            return fun.edit(data.type, a(that).text(), data.id);
        });
        m.event.change('status', function (data, that) {
            fun.getList(data.type);
        });
    });
</script>
</html>